diff --git a/.history/src/api/kdfh_20231214133247.js b/.history/src/api/kdfh_20231214133247.js
new file mode 100644
index 0000000..e69de29
diff --git a/.history/src/api/kdfh_20231214133258.js b/.history/src/api/kdfh_20231214133258.js
new file mode 100644
index 0000000..a45f024
--- /dev/null
+++ b/.history/src/api/kdfh_20231214133258.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+ 
+// 
+export function loadBrand (limit) {
+  return request({
+    // url: 'brand',
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214133415.js b/.history/src/api/kdfh_20231214133415.js
new file mode 100644
index 0000000..2290983
--- /dev/null
+++ b/.history/src/api/kdfh_20231214133415.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function kdfhzy (limit) {
+  return request({
+    // url: 'brand',
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214133457.js b/.history/src/api/kdfh_20231214133457.js
new file mode 100644
index 0000000..5f42501
--- /dev/null
+++ b/.history/src/api/kdfh_20231214133457.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy (data) {
+  return request({
+    // url: 'brand',
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214133511.js b/.history/src/api/kdfh_20231214133511.js
new file mode 100644
index 0000000..a39f115
--- /dev/null
+++ b/.history/src/api/kdfh_20231214133511.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    // url: 'brand',
+    url: `api/GetAdjustableload`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214133512.js b/.history/src/api/kdfh_20231214133512.js
new file mode 100644
index 0000000..a39f115
--- /dev/null
+++ b/.history/src/api/kdfh_20231214133512.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    // url: 'brand',
+    url: `api/GetAdjustableload`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214142817.js b/.history/src/api/kdfh_20231214142817.js
new file mode 100644
index 0000000..dc50090
--- /dev/null
+++ b/.history/src/api/kdfh_20231214142817.js
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `api/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+export function GetKdfhzy () {
+    return request({
+      url: `api/GetAdjustableload`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214142820.js b/.history/src/api/kdfh_20231214142820.js
new file mode 100644
index 0000000..57ee317
--- /dev/null
+++ b/.history/src/api/kdfh_20231214142820.js
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `api/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+export function GetKdfhfx () {
+    return request({
+      url: `api/GetAdjustableload`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214142843.js b/.history/src/api/kdfh_20231214142843.js
new file mode 100644
index 0000000..1be6c2c
--- /dev/null
+++ b/.history/src/api/kdfh_20231214142843.js
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `api/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+export function GetKdfhfx () {
+    return request({
+      url: `api/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214142859.js b/.history/src/api/kdfh_20231214142859.js
new file mode 100644
index 0000000..87355b7
--- /dev/null
+++ b/.history/src/api/kdfh_20231214142859.js
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+export function GetKdfhfx () {
+    return request({
+      url: `/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214143738.js b/.history/src/api/kdfh_20231214143738.js
new file mode 100644
index 0000000..87d7d95
--- /dev/null
+++ b/.history/src/api/kdfh_20231214143738.js
@@ -0,0 +1,23 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+//   
+export function GetKdfhfx () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214143740.js b/.history/src/api/kdfh_20231214143740.js
new file mode 100644
index 0000000..87d7d95
--- /dev/null
+++ b/.history/src/api/kdfh_20231214143740.js
@@ -0,0 +1,23 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+//   
+export function GetKdfhfx () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214145530.js b/.history/src/api/kdfh_20231214145530.js
new file mode 100644
index 0000000..c4c029a
--- /dev/null
+++ b/.history/src/api/kdfh_20231214145530.js
@@ -0,0 +1,23 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+// 可调负荷分析
+export function GetKdfhfx () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214145546.js b/.history/src/api/kdfh_20231214145546.js
new file mode 100644
index 0000000..0bc4d49
--- /dev/null
+++ b/.history/src/api/kdfh_20231214145546.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+// 可调负荷分析
+export function GetKdfhfx () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
+// 
+export function GetGang () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214145555.js b/.history/src/api/kdfh_20231214145555.js
new file mode 100644
index 0000000..c68764a
--- /dev/null
+++ b/.history/src/api/kdfh_20231214145555.js
@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+// 可调负荷分析
+export function GetKdfhfx () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
+// 
+export function GetGang () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
+  export function GetGang () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214145600.js b/.history/src/api/kdfh_20231214145600.js
new file mode 100644
index 0000000..a7f1460
--- /dev/null
+++ b/.history/src/api/kdfh_20231214145600.js
@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+// 可调负荷分析
+export function GetKdfhfx () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
+// 
+export function GetGang () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
+  export function GetRuan () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214145617.js b/.history/src/api/kdfh_20231214145617.js
new file mode 100644
index 0000000..2fef867
--- /dev/null
+++ b/.history/src/api/kdfh_20231214145617.js
@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+// 可调负荷分析
+export function GetKdfhfx () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
+// 
+export function GetGang () {
+    return request({
+      url: `//GetRigidAdjustableLoads`,
+      method: 'GET'
+    })
+  }
+  export function GetRuan () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214145636.js b/.history/src/api/kdfh_20231214145636.js
new file mode 100644
index 0000000..4fbb069
--- /dev/null
+++ b/.history/src/api/kdfh_20231214145636.js
@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+// 可调负荷分析
+export function GetKdfhfx () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
+// 
+export function GetGang () {
+    return request({
+      url: `//GetRigidAdjustableLoads`,
+      method: 'GET'
+    })
+  }
+  export function GetRou () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214145649.js b/.history/src/api/kdfh_20231214145649.js
new file mode 100644
index 0000000..9f340f5
--- /dev/null
+++ b/.history/src/api/kdfh_20231214145649.js
@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+// 可调负荷分析
+export function GetKdfhfx () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
+// 
+export function GetGang () {
+    return request({
+      url: `//GetRigidAdjustableLoads`,
+      method: 'GET'
+    })
+  }
+  export function GetRou () {
+    return request({
+      url: `//GetFlexibleAdjustableLoad`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214145717.js b/.history/src/api/kdfh_20231214145717.js
new file mode 100644
index 0000000..aab6cf7
--- /dev/null
+++ b/.history/src/api/kdfh_20231214145717.js
@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+// 可调负荷分析
+export function GetKdfhfx () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
+// 刚性可调负荷
+export function GetGang () {
+    return request({
+      url: `//GetRigidAdjustableLoads`,
+      method: 'GET'
+    })
+  }
+  export function GetRou () {
+    return request({
+      url: `//GetFlexibleAdjustableLoad`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231214145726.js b/.history/src/api/kdfh_20231214145726.js
new file mode 100644
index 0000000..e650e47
--- /dev/null
+++ b/.history/src/api/kdfh_20231214145726.js
@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+// 可调负荷分析
+export function GetKdfhfx () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
+// 刚性可调负荷
+export function GetGang () {
+    return request({
+      url: `//GetRigidAdjustableLoads`,
+      method: 'GET'
+    })
+  }
+//   柔性可调负荷
+  export function GetRou () {
+    return request({
+      url: `//GetFlexibleAdjustableLoad`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/.history/src/main_20231214103236.js b/.history/src/main_20231214103236.js
new file mode 100644
index 0000000..2f1ee76
--- /dev/null
+++ b/.history/src/main_20231214103236.js
@@ -0,0 +1,18 @@
+import Vue from "vue";
+import App from "./App.vue";
+import "./registerServiceWorker";
+import router from "./router";
+import store from "./store";
+Vue.config.productionTip = false;
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+// 全局引入Echarts;
+import * as echarts from "echarts";
+import "echarts-gl";
+Vue.prototype.$echarts = echarts;
+Vue.use(ElementUI);
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount("#app");
diff --git a/.history/src/utils/request_20231214133454.js b/.history/src/utils/request_20231214133454.js
new file mode 100644
index 0000000..a62e579
--- /dev/null
+++ b/.history/src/utils/request_20231214133454.js
@@ -0,0 +1,54 @@
+/* 封装axios用于发送请求 */
+import axios from "axios";
+import { Message } from "element-ui"; // 请确保你的项目中已经安装了 Element UI
+const request = axios.create({
+  baseURL: "https://localhost:44352/", // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  timeout: 5000, // 请求超时：当5s没有响应就会结束请求
+});
+
+// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
+request.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    return config;
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  }
+);
+
+// 添加响应拦截器
+request.interceptors.response.use(
+  function (response) {
+    // 对响应数据做点什么
+    return response.data;
+  },
+  function (error) {
+    // 对响应错误做点什么
+    if (error.response) {
+      // 请求已发出，但服务器响应状态码不在 2xx 范围内
+      console.error("Error status:", error.response.status);
+      console.error("Error data:", error.response.data);
+      console.error("Error headers:", error.response.headers);
+
+      // 提示错误信息
+      Message.error(`请求错误：${error.response.status}`);
+    } else if (error.request) {
+      // 请求被发出但未收到响应
+      console.error("No response received:", error.request);
+
+      // 提示错误信息
+      Message.error("网络错误，请稍后重试");
+    } else {
+      // 设置请求时发生了一些错误
+      console.error("Error:", error.message);
+
+      // 提示错误信息
+      Message.error("请求失败，请稍后重试");
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default request;
diff --git a/.history/src/utils/request_20231214142905.js b/.history/src/utils/request_20231214142905.js
new file mode 100644
index 0000000..332ec13
--- /dev/null
+++ b/.history/src/utils/request_20231214142905.js
@@ -0,0 +1,54 @@
+/* 封装axios用于发送请求 */
+import axios from "axios";
+import { Message } from "element-ui"; // 请确保你的项目中已经安装了 Element UI
+const request = axios.create({
+  baseURL: "https://localhost:44352/api/", // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  timeout: 5000, // 请求超时：当5s没有响应就会结束请求
+});
+
+// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
+request.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    return config;
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  }
+);
+
+// 添加响应拦截器
+request.interceptors.response.use(
+  function (response) {
+    // 对响应数据做点什么
+    return response.data;
+  },
+  function (error) {
+    // 对响应错误做点什么
+    if (error.response) {
+      // 请求已发出，但服务器响应状态码不在 2xx 范围内
+      console.error("Error status:", error.response.status);
+      console.error("Error data:", error.response.data);
+      console.error("Error headers:", error.response.headers);
+
+      // 提示错误信息
+      Message.error(`请求错误：${error.response.status}`);
+    } else if (error.request) {
+      // 请求被发出但未收到响应
+      console.error("No response received:", error.request);
+
+      // 提示错误信息
+      Message.error("网络错误，请稍后重试");
+    } else {
+      // 设置请求时发生了一些错误
+      console.error("Error:", error.message);
+
+      // 提示错误信息
+      Message.error("请求失败，请稍后重试");
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default request;
diff --git a/.history/src/views/Zhou/KDFH_20231214133648.vue b/.history/src/views/Zhou/KDFH_20231214133648.vue
new file mode 100644
index 0000000..9b3c48b
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214133648.vue
@@ -0,0 +1,1877 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: 53,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: 42,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214133819.vue b/.history/src/views/Zhou/KDFH_20231214133819.vue
new file mode 100644
index 0000000..c502415
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214133819.vue
@@ -0,0 +1,1881 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: 53,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: 42,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getKdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214133904.vue b/.history/src/views/Zhou/KDFH_20231214133904.vue
new file mode 100644
index 0000000..e90d89f
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214133904.vue
@@ -0,0 +1,1882 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: 53,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: 42,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getKdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214134018.vue b/.history/src/views/Zhou/KDFH_20231214134018.vue
new file mode 100644
index 0000000..0a4fee0
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214134018.vue
@@ -0,0 +1,1883 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: 53,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: 42,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214134106.vue b/.history/src/views/Zhou/KDFH_20231214134106.vue
new file mode 100644
index 0000000..ae1e795
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214134106.vue
@@ -0,0 +1,1883 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: 53,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: 42,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy;
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214134113.vue b/.history/src/views/Zhou/KDFH_20231214134113.vue
new file mode 100644
index 0000000..0a4fee0
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214134113.vue
@@ -0,0 +1,1883 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: 53,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: 42,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214134314.vue b/.history/src/views/Zhou/KDFH_20231214134314.vue
new file mode 100644
index 0000000..1544b71
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214134314.vue
@@ -0,0 +1,1883 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: 53,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: 42,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214134556.vue b/.history/src/views/Zhou/KDFH_20231214134556.vue
new file mode 100644
index 0000000..44a674a
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214134556.vue
@@ -0,0 +1,1887 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:42,
+      
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: 53,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: 42,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214134607.vue b/.history/src/views/Zhou/KDFH_20231214134607.vue
new file mode 100644
index 0000000..15e0ffc
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214134607.vue
@@ -0,0 +1,1887 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: 53,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: 42,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214134618.vue b/.history/src/views/Zhou/KDFH_20231214134618.vue
new file mode 100644
index 0000000..1f9168e
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214134618.vue
@@ -0,0 +1,1887 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: 42,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214134657.vue b/.history/src/views/Zhou/KDFH_20231214134657.vue
new file mode 100644
index 0000000..1f9168e
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214134657.vue
@@ -0,0 +1,1887 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: 42,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214134715.vue b/.history/src/views/Zhou/KDFH_20231214134715.vue
new file mode 100644
index 0000000..58f5a44
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214134715.vue
@@ -0,0 +1,1886 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+    fhzyData:[],      
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: 42,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214134806.vue b/.history/src/views/Zhou/KDFH_20231214134806.vue
new file mode 100644
index 0000000..2ac038d
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214134806.vue
@@ -0,0 +1,1887 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: 42,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214134817.vue b/.history/src/views/Zhou/KDFH_20231214134817.vue
new file mode 100644
index 0000000..3df39b5
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214134817.vue
@@ -0,0 +1,1887 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214134822.vue b/.history/src/views/Zhou/KDFH_20231214134822.vue
new file mode 100644
index 0000000..3df39b5
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214134822.vue
@@ -0,0 +1,1887 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214135216.vue b/.history/src/views/Zhou/KDFH_20231214135216.vue
new file mode 100644
index 0000000..f3a2041
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214135216.vue
@@ -0,0 +1,1890 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[],
+      tglist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [25, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#24BDF2", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+                // {
+                //   type: "max",
+                //   name: "Max",
+                //   symbolOffset: [-20, 0],
+                //   itemStyle: {
+                //     color: "transparent", // 标注点颜色
+                //   },
+                //   // label 用于设置标注点上的文本标签样式
+                //   label: {
+                //     color: "#0BE73B", // 文本颜色
+                //     fontSize: 25,
+                //   },
+                // },
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214135326.vue b/.history/src/views/Zhou/KDFH_20231214135326.vue
new file mode 100644
index 0000000..d7917c0
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214135326.vue
@@ -0,0 +1,1864 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[],
+      tglist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = [8.8, 6.0, 6.0, 5.0];
+      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              
+              // icon: require("../../../assets/nyjc/昨日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              // icon: require("../../../assets/nyjc/今日.png"),
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214135510.vue b/.history/src/views/Zhou/KDFH_20231214135510.vue
new file mode 100644
index 0000000..f4b054c
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214135510.vue
@@ -0,0 +1,1861 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[],
+      tglist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214135559.vue b/.history/src/views/Zhou/KDFH_20231214135559.vue
new file mode 100644
index 0000000..885633f
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214135559.vue
@@ -0,0 +1,1861 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[9.3, 7.0, 7.0, 6.0],
+      tglist:[9.3, 7.0, 7.0, 6.0],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214140429.vue b/.history/src/views/Zhou/KDFH_20231214140429.vue
new file mode 100644
index 0000000..6029d58
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214140429.vue
@@ -0,0 +1,1860 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[9.3, 7.0, 7.0, 6.0],
+      tglist:[9.3, 7.0, 7.0, 6.0],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214142931.vue b/.history/src/views/Zhou/KDFH_20231214142931.vue
new file mode 100644
index 0000000..1085980
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214142931.vue
@@ -0,0 +1,1860 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy,GetKdfhfx} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[9.3, 7.0, 7.0, 6.0],
+      tglist:[9.3, 7.0, 7.0, 6.0],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214143030.vue b/.history/src/views/Zhou/KDFH_20231214143030.vue
new file mode 100644
index 0000000..0da7f88
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214143030.vue
@@ -0,0 +1,1864 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy,GetKdfhfx} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00kW",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00kW",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00kW",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[9.3, 7.0, 7.0, 6.0],
+      tglist:[9.3, 7.0, 7.0, 6.0],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhfx(){
+      let res = await GetKdfhfx();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214143129.vue b/.history/src/views/Zhou/KDFH_20231214143129.vue
new file mode 100644
index 0000000..f4d92df
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214143129.vue
@@ -0,0 +1,1864 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy,GetKdfhfx} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[9.3, 7.0, 7.0, 6.0],
+      tglist:[9.3, 7.0, 7.0, 6.0],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhfx(){
+      let res = await GetKdfhfx();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214143140.vue b/.history/src/views/Zhou/KDFH_20231214143140.vue
new file mode 100644
index 0000000..9f1a6db
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214143140.vue
@@ -0,0 +1,1864 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy,GetKdfhfx} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[9.3, 7.0, 7.0, 6.0],
+      tglist:[9.3, 7.0, 7.0, 6.0],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhfx(){
+      let res = await GetKdfhfx();
+      console.log(res);
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214143305.vue b/.history/src/views/Zhou/KDFH_20231214143305.vue
new file mode 100644
index 0000000..6e249e0
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214143305.vue
@@ -0,0 +1,1865 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date2 }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy,GetKdfhfx} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[9.3, 7.0, 7.0, 6.0],
+      tglist:[9.3, 7.0, 7.0, 6.0],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhfx(){
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.plan =res.data;
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214143424.vue b/.history/src/views/Zhou/KDFH_20231214143424.vue
new file mode 100644
index 0000000..635fc22
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214143424.vue
@@ -0,0 +1,1865 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="LevelRegulation" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="ExecutionTime" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy,GetKdfhfx} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          date2: "102.00",
+          date3: "5分钟",
+        },
+        {
+          date1: "一级",
+          date2: "29.00",
+          date3: "30分钟",
+        },
+        {
+          date1: "一级",
+          date2: "45.00",
+          date3: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[9.3, 7.0, 7.0, 6.0],
+      tglist:[9.3, 7.0, 7.0, 6.0],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhfx(){
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.plan =res.data;
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214143502.vue b/.history/src/views/Zhou/KDFH_20231214143502.vue
new file mode 100644
index 0000000..bdade78
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214143502.vue
@@ -0,0 +1,1865 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="LevelRegulation" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="ExecutionTime" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy,GetKdfhfx} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          date1: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          date1: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          date1: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[9.3, 7.0, 7.0, 6.0],
+      tglist:[9.3, 7.0, 7.0, 6.0],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhfx(){
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.plan =res.data;
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214143511.vue b/.history/src/views/Zhou/KDFH_20231214143511.vue
new file mode 100644
index 0000000..537cc18
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214143511.vue
@@ -0,0 +1,1865 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="LevelRegulation" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="ExecutionTime" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy,GetKdfhfx} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[9.3, 7.0, 7.0, 6.0],
+      tglist:[9.3, 7.0, 7.0, 6.0],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhfx(){
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.plan =res.data;
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214143709.vue b/.history/src/views/Zhou/KDFH_20231214143709.vue
new file mode 100644
index 0000000..d6c7ec1
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214143709.vue
@@ -0,0 +1,1865 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="LevelRegulation" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="ExecutionTime" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy,GetKdfhcl} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[9.3, 7.0, 7.0, 6.0],
+      tglist:[9.3, 7.0, 7.0, 6.0],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl(){
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan =res.data;
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214143811.vue b/.history/src/views/Zhou/KDFH_20231214143811.vue
new file mode 100644
index 0000000..056cedd
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214143811.vue
@@ -0,0 +1,1870 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="LevelRegulation" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="ExecutionTime" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy,GetKdfhcl} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[9.3, 7.0, 7.0, 6.0],
+      tglist:[9.3, 7.0, 7.0, 6.0],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl(){
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan =res.data;
+    },
+    async getkdfhfx(){
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.plan =res.data;
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214143852.vue b/.history/src/views/Zhou/KDFH_20231214143852.vue
new file mode 100644
index 0000000..cc1c797
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214143852.vue
@@ -0,0 +1,1870 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="LevelRegulation" label="调控等级" align="center">
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="ExecutionTime" label="执行时长" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import {GetKdfhzy,GetKdfhcl} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata:53,
+      tgdata:42,
+      xflist:[9.3, 7.0, 7.0, 6.0],
+      tglist:[9.3, 7.0, 7.0, 6.0],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth:40,
+          itemHeight:20,
+          padding:[0,10,0,10,],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize:24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [
+              ],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy(){
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl(){
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan =res.data;
+    },
+    async getkdfhfx(){
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist =res.data[0];
+    }
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei{
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214144030.vue b/.history/src/views/Zhou/KDFH_20231214144030.vue
new file mode 100644
index 0000000..604e7de
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214144030.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214144109.vue b/.history/src/views/Zhou/KDFH_20231214144109.vue
new file mode 100644
index 0000000..24ec1ed
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214144109.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>500<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>5100<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214144223.vue b/.history/src/views/Zhou/KDFH_20231214144223.vue
new file mode 100644
index 0000000..4fe4180
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214144223.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>300<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214144238.vue b/.history/src/views/Zhou/KDFH_20231214144238.vue
new file mode 100644
index 0000000..5bfb270
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214144238.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>1540<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214144248.vue b/.history/src/views/Zhou/KDFH_20231214144248.vue
new file mode 100644
index 0000000..eafd7ba
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214144248.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214144504.vue b/.history/src/views/Zhou/KDFH_20231214144504.vue
new file mode 100644
index 0000000..9aa207a
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214144504.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214144658.vue b/.history/src/views/Zhou/KDFH_20231214144658.vue
new file mode 100644
index 0000000..68fe40a
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214144658.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145010.vue b/.history/src/views/Zhou/KDFH_20231214145010.vue
new file mode 100644
index 0000000..5ceb24e
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145010.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145016.vue b/.history/src/views/Zhou/KDFH_20231214145016.vue
new file mode 100644
index 0000000..9de6d62
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145016.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 40px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145036.vue b/.history/src/views/Zhou/KDFH_20231214145036.vue
new file mode 100644
index 0000000..6986f73
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145036.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 36px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145055.vue b/.history/src/views/Zhou/KDFH_20231214145055.vue
new file mode 100644
index 0000000..c509dd9
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145055.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 240px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 160px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 36px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145108.vue b/.history/src/views/Zhou/KDFH_20231214145108.vue
new file mode 100644
index 0000000..4b31461
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145108.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 36px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145112.vue b/.history/src/views/Zhou/KDFH_20231214145112.vue
new file mode 100644
index 0000000..ddb754e
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145112.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 40px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 36px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145117.vue b/.history/src/views/Zhou/KDFH_20231214145117.vue
new file mode 100644
index 0000000..2d7cab1
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145117.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 36px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 36px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145141.vue b/.history/src/views/Zhou/KDFH_20231214145141.vue
new file mode 100644
index 0000000..ddb754e
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145141.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 40px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 36px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145150.vue b/.history/src/views/Zhou/KDFH_20231214145150.vue
new file mode 100644
index 0000000..8422d60
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145150.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 36px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145202.vue b/.history/src/views/Zhou/KDFH_20231214145202.vue
new file mode 100644
index 0000000..5216956
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145202.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 168px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 36px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145222.vue b/.history/src/views/Zhou/KDFH_20231214145222.vue
new file mode 100644
index 0000000..f28f8c9
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145222.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 168px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145231.vue b/.history/src/views/Zhou/KDFH_20231214145231.vue
new file mode 100644
index 0000000..4c08387
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145231.vue
@@ -0,0 +1,1885 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 168px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 180px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145311.vue b/.history/src/views/Zhou/KDFH_20231214145311.vue
new file mode 100644
index 0000000..2a02ee8
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145311.vue
@@ -0,0 +1,1886 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 168px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 180px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145321.vue b/.history/src/views/Zhou/KDFH_20231214145321.vue
new file mode 100644
index 0000000..d7f7b7a
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145321.vue
@@ -0,0 +1,1886 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 168px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145336.vue b/.history/src/views/Zhou/KDFH_20231214145336.vue
new file mode 100644
index 0000000..c419aec
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145336.vue
@@ -0,0 +1,1886 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214145341.vue b/.history/src/views/Zhou/KDFH_20231214145341.vue
new file mode 100644
index 0000000..20f16b0
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214145341.vue
@@ -0,0 +1,1887 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150008.vue b/.history/src/views/Zhou/KDFH_20231214150008.vue
new file mode 100644
index 0000000..64e2f63
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150008.vue
@@ -0,0 +1,1891 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      percent_gang:55,
+      // 柔性可调负荷
+      percent_rou:55,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150018.vue b/.history/src/views/Zhou/KDFH_20231214150018.vue
new file mode 100644
index 0000000..19cfb79
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150018.vue
@@ -0,0 +1,1891 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: this.percent_gang + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      percent_gang:55,
+      // 柔性可调负荷
+      percent_rou:55,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150103.vue b/.history/src/views/Zhou/KDFH_20231214150103.vue
new file mode 100644
index 0000000..1e1718a
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150103.vue
@@ -0,0 +1,1891 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter:percent_gang + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      percent_gang:55,
+      // 柔性可调负荷
+      percent_rou:55,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150327.vue b/.history/src/views/Zhou/KDFH_20231214150327.vue
new file mode 100644
index 0000000..6acde2f
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150327.vue
@@ -0,0 +1,1894 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return + "{d|%}",
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      percent_gang:55,
+      // 柔性可调负荷
+      percent_rou:55,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150334.vue b/.history/src/views/Zhou/KDFH_20231214150334.vue
new file mode 100644
index 0000000..8eb15e4
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150334.vue
@@ -0,0 +1,1894 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value+ "{d|%}",
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      percent_gang:55,
+      // 柔性可调负荷
+      percent_rou:55,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150346.vue b/.history/src/views/Zhou/KDFH_20231214150346.vue
new file mode 100644
index 0000000..8eb15e4
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150346.vue
@@ -0,0 +1,1894 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value+ "{d|%}",
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      percent_gang:55,
+      // 柔性可调负荷
+      percent_rou:55,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150350.vue b/.history/src/views/Zhou/KDFH_20231214150350.vue
new file mode 100644
index 0000000..c2b99e2
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150350.vue
@@ -0,0 +1,1894 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      percent_gang:55,
+      // 柔性可调负荷
+      percent_rou:55,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150527.vue b/.history/src/views/Zhou/KDFH_20231214150527.vue
new file mode 100644
index 0000000..8045529
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150527.vue
@@ -0,0 +1,1894 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      percent_gang:55,
+      // 柔性可调负荷
+      percent_rou:55,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150531.vue b/.history/src/views/Zhou/KDFH_20231214150531.vue
new file mode 100644
index 0000000..b169311
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150531.vue
@@ -0,0 +1,1894 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 55,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      percent_gang:55,
+      // 柔性可调负荷
+      percent_rou:55,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150554.vue b/.history/src/views/Zhou/KDFH_20231214150554.vue
new file mode 100644
index 0000000..e3f8048
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150554.vue
@@ -0,0 +1,1895 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                all:
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      percent_gang:55,
+      // 柔性可调负荷
+      percent_rou:55,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150610.vue b/.history/src/views/Zhou/KDFH_20231214150610.vue
new file mode 100644
index 0000000..a9de593
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150610.vue
@@ -0,0 +1,1895 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 55,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      percent_gang:55,
+      // 柔性可调负荷
+      percent_rou:55,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150652.vue b/.history/src/views/Zhou/KDFH_20231214150652.vue
new file mode 100644
index 0000000..feb2e6f
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150652.vue
@@ -0,0 +1,1895 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      percent_gang:55,
+      // 柔性可调负荷
+      percent_rou:55,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150738.vue b/.history/src/views/Zhou/KDFH_20231214150738.vue
new file mode 100644
index 0000000..00030db
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150738.vue
@@ -0,0 +1,1895 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: 55 + "{d|%}",
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      percent_gang:55,
+      // 柔性可调负荷
+      percent_rou:55,
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150826.vue b/.history/src/views/Zhou/KDFH_20231214150826.vue
new file mode 100644
index 0000000..11683ec
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150826.vue
@@ -0,0 +1,1894 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150842.vue b/.history/src/views/Zhou/KDFH_20231214150842.vue
new file mode 100644
index 0000000..2f7f419
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150842.vue
@@ -0,0 +1,1894 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              0.6,
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              // 0.6,
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150908.vue b/.history/src/views/Zhou/KDFH_20231214150908.vue
new file mode 100644
index 0000000..9564a9e
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150908.vue
@@ -0,0 +1,1892 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214150909.vue b/.history/src/views/Zhou/KDFH_20231214150909.vue
new file mode 100644
index 0000000..9564a9e
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214150909.vue
@@ -0,0 +1,1892 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214151026.vue b/.history/src/views/Zhou/KDFH_20231214151026.vue
new file mode 100644
index 0000000..2752134
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214151026.vue
@@ -0,0 +1,1896 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214151107.vue b/.history/src/views/Zhou/KDFH_20231214151107.vue
new file mode 100644
index 0000000..092d582
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214151107.vue
@@ -0,0 +1,1901 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214151142.vue b/.history/src/views/Zhou/KDFH_20231214151142.vue
new file mode 100644
index 0000000..092d582
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214151142.vue
@@ -0,0 +1,1901 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214151507.vue b/.history/src/views/Zhou/KDFH_20231214151507.vue
new file mode 100644
index 0000000..f1b4d15
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214151507.vue
@@ -0,0 +1,1903 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214151510.vue b/.history/src/views/Zhou/KDFH_20231214151510.vue
new file mode 100644
index 0000000..cc4bd09
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214151510.vue
@@ -0,0 +1,1903 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214151511.vue b/.history/src/views/Zhou/KDFH_20231214151511.vue
new file mode 100644
index 0000000..cc4bd09
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214151511.vue
@@ -0,0 +1,1903 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214151548.vue b/.history/src/views/Zhou/KDFH_20231214151548.vue
new file mode 100644
index 0000000..7618542
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214151548.vue
@@ -0,0 +1,1910 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214151601.vue b/.history/src/views/Zhou/KDFH_20231214151601.vue
new file mode 100644
index 0000000..8ba78de
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214151601.vue
@@ -0,0 +1,1911 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214151609.vue b/.history/src/views/Zhou/KDFH_20231214151609.vue
new file mode 100644
index 0000000..8c51f3c
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214151609.vue
@@ -0,0 +1,1912 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">38</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.roulist=res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214153812.vue b/.history/src/views/Zhou/KDFH_20231214153812.vue
new file mode 100644
index 0000000..bf1ca97
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214153812.vue
@@ -0,0 +1,1912 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{ ganglist.QuantityFacility }}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ganglist.Rigidity}}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ ganglist.GrossValue }}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{ganglist.QuantityFacility}}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">1348</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">4348</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.roulist=res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214153841.vue b/.history/src/views/Zhou/KDFH_20231214153841.vue
new file mode 100644
index 0000000..8364527
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214153841.vue
@@ -0,0 +1,1912 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{ ganglist.QuantityFacility }}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ganglist.Rigidity}}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ ganglist.GrossValue }}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{roulist.QuantityFacility}}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ roulist.Flexible }}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ roulist }}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.roulist=res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214153846.vue b/.history/src/views/Zhou/KDFH_20231214153846.vue
new file mode 100644
index 0000000..387318d
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214153846.vue
@@ -0,0 +1,1912 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{ ganglist.QuantityFacility }}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ganglist.Rigidity}}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ ganglist.GrossValue }}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{roulist.QuantityFacility}}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ roulist.Flexible }}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ roulist.GrossValue}}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.roulist=res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214161521.vue b/.history/src/views/Zhou/KDFH_20231214161521.vue
new file mode 100644
index 0000000..c2e4fb1
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214161521.vue
@@ -0,0 +1,1912 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{ ganglist.QuantityFacility }}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ganglist.Rigidity}}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ ganglist.GrossValue }}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{roulist.QuantityFacility}}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ roulist.Flexible }}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ roulist.GrossValue}}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.roulist=res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 15px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214161523.vue b/.history/src/views/Zhou/KDFH_20231214161523.vue
new file mode 100644
index 0000000..c10df3b
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214161523.vue
@@ -0,0 +1,1912 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{ ganglist.QuantityFacility }}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ganglist.Rigidity}}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ ganglist.GrossValue }}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{roulist.QuantityFacility}}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ roulist.Flexible }}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ roulist.GrossValue}}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.roulist=res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214161534.vue b/.history/src/views/Zhou/KDFH_20231214161534.vue
new file mode 100644
index 0000000..99934e5
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214161534.vue
@@ -0,0 +1,1912 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{ ganglist.QuantityFacility }}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ganglist.Rigidity}}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ ganglist.GrossValue }}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{roulist.QuantityFacility}}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ roulist.Flexible }}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ roulist.GrossValue}}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.roulist=res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214161543.vue b/.history/src/views/Zhou/KDFH_20231214161543.vue
new file mode 100644
index 0000000..e997451
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214161543.vue
@@ -0,0 +1,1912 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{ ganglist.QuantityFacility }}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ganglist.Rigidity}}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ ganglist.GrossValue }}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{roulist.QuantityFacility}}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ roulist.Flexible }}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ roulist.GrossValue}}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.roulist=res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 12px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214161544.vue b/.history/src/views/Zhou/KDFH_20231214161544.vue
new file mode 100644
index 0000000..e997451
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214161544.vue
@@ -0,0 +1,1912 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{ ganglist.QuantityFacility }}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ganglist.Rigidity}}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ ganglist.GrossValue }}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{roulist.QuantityFacility}}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ roulist.Flexible }}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ roulist.GrossValue}}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.roulist=res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 12px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214161724.vue b/.history/src/views/Zhou/KDFH_20231214161724.vue
new file mode 100644
index 0000000..e65dbb0
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214161724.vue
@@ -0,0 +1,1912 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{ ganglist.QuantityFacility }}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ganglist.Rigidity}}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ ganglist.GrossValue }}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{roulist.QuantityFacility}}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ roulist.Flexible }}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ roulist.GrossValue}}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.roulist=res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          // width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 12px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214161744.vue b/.history/src/views/Zhou/KDFH_20231214161744.vue
new file mode 100644
index 0000000..e65dbb0
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214161744.vue
@@ -0,0 +1,1912 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{ ganglist.QuantityFacility }}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ganglist.Rigidity}}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ ganglist.GrossValue }}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{roulist.QuantityFacility}}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ roulist.Flexible }}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ roulist.GrossValue}}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.roulist=res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          // width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 12px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214161745.vue b/.history/src/views/Zhou/KDFH_20231214161745.vue
new file mode 100644
index 0000000..e65dbb0
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214161745.vue
@@ -0,0 +1,1912 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{ ganglist.QuantityFacility }}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ganglist.Rigidity}}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ ganglist.GrossValue }}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{roulist.QuantityFacility}}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ roulist.Flexible }}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ roulist.GrossValue}}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.roulist=res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          // width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 12px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231214161755.vue b/.history/src/views/Zhou/KDFH_20231214161755.vue
new file mode 100644
index 0000000..0707851
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231214161755.vue
@@ -0,0 +1,1912 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
+      <div class="kdfhzy">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷资源</p>
+        </div>
+        <div id="kdfhzy">
+          <div class="headers">
+            <div id="xf"></div>
+            <div id="tg"></div>
+          </div>
+          <div id="fhzy"></div>
+        </div>
+      </div>
+      <div class="fhdkcl">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷调控策略</p>
+        </div>
+        <div id="fhdkcl">
+          <div class="table">
+            <el-table
+              :data="plan"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column prop="Target" label="目标" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.Target }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="kdfhfx">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调负荷分析</p>
+        </div>
+        <div class="fenxi">
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
+          <div class="one">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
+              <p>可参与削锋负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="first_left">
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
+              <p>可参与填谷负荷</p>
+            </div>
+            <div class="first_center"></div>
+            <div class="first_right">
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
+              <p>单次补贴金额</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="kdsb">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>可调设备</p>
+        </div>
+        <div id="kdsb">
+          <div class="table">
+            <el-table
+              :data="devices"
+              style="width: 100%"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="date1" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.date2 == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="danwei">kW</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="gxkdfh">
+        <div class="imgBox5">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>刚性可调负荷</p>
+        </div>
+        <div class="five">
+          <div id="gang"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{ ganglist.QuantityFacility }}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ganglist.Rigidity}}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ ganglist.GrossValue }}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rxkdfh">
+        <div class="imgBox6">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>软性可调负荷</p>
+        </div>
+        <div class="six">
+          <div id="ruan"></div>
+          <div class="gang_r">
+            <div class="g_one">
+              <span class="gang_one"></span>
+              <span>设备数量：</span>
+              <span class="gang_count">{{roulist.QuantityFacility}}</span>
+              <span>个</span>
+            </div>
+            <div class="g_two">
+              <span class="gang_two"></span>
+              <span>刚性可调负荷：</span>
+              <span class="gang_count">{{ roulist.Flexible }}</span>
+              <span>kW</span>
+            </div>
+            <div class="g_three">
+              <span class="gang_three"></span>
+              <span>总可调负荷：</span>
+              <span class="gang_count">{{ roulist.GrossValue}}</span>
+              <span>kW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import "../../utils/echarts-liquidfill.min.js";
+import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [
+        {
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
+        },
+        {
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      option: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                all:100,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#2EED5C",
+                  },
+                  {
+                    offset: 0,
+                    color: "#2EED5C",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#2EED5C",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#2EED5C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie(),
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            // value: 50, //  内容 配合formatter
+            type: "liquidFill",
+            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 0.6,
+                direction: "left", //波浪方向
+              },
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "transparent", // 球体本景色
+            },
+            amplitude: "6%", //波浪的振幅
+            // 修改波浪颜色
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#10A1DD",
+                  },
+                  {
+                    offset: 0,
+                    color: "#10A1DD",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            label: {
+              normal: {
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
+                rich: {
+                  d: {
+                    fontSize: 36,
+                  },
+                },
+                textStyle: {
+                  fontSize: 48,
+                  color: "#fff",
+                },
+              },
+            },
+            outline: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            z: 1,
+            center: ["50%", "50%"],
+            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
+            hoverAnimation: false,
+            data: [
+              {
+                name: "",
+                value: 500,
+                labelLine: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: "#10A1DD",
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: "#10A1DD",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            zlevel: 0,
+            silent: true,
+            radius: ["78%", "80%"],
+            z: 1,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: this.Pie2(),
+          },
+        ],
+      },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "负荷管理_true",
+      // });
+      window.vuplex.postMessage("负荷管理-可调负荷");
+      this.$router.push("/fhgl");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    Pie() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#2EED5C",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    Pie2() {
+      let dataArr = [];
+      for (var i = 0; i < 150; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 50,
+            itemStyle: {
+              normal: {
+                color: "#10A1DD",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      return dataArr;
+    },
+    xf() {
+      const dataArr = [
+        {
+          value: this.xfdata,
+          name: "削锋",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#136768", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#28E2EC ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.81, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#25D1D9",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#25D1D9",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: "#0092F2",
+          fontSize: 50,
+          color: "#fff",
+          backgroundColor: "#1B215B",
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              fontSize: 30,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+              // label: {
+              //     formatter: function (params) {
+              //         return "{name|" + params.name + "}"
+              //     },
+              //     rich: {
+              //         name: {
+              //             fontSize: 24,
+              //             with: 100,
+              //             height: 40,
+              //             borderRadius: [4, 4, 4, 4],
+              //             borderWidth: 1,
+
+              //         }
+              //     },
+              // },
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("xf");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    tg() {
+      const dataArr = [
+        {
+          value: this.tgdata,
+          name: "填谷",
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: "#00C78B", // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: "#00FEB4 ", // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.7, color],
+        [1, "#136768"],
+      ];
+      const rich = {
+        white: {
+          fontSize: 40,
+          color: "#00FEB4",
+          fontWeight: "500",
+        },
+        bule: {
+          fontSize: 60,
+          fontFamily: "DINBold",
+          color: "#00FEB4",
+          fontWeight: "700",
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          // borderColor: '#0092F2',
+          fontSize: 50,
+          color: "#fff",
+          // backgroundColor: '#1B215B',
+          borderRadius: 20,
+          textAlign: "center",
+        },
+        size: {
+          height: 400,
+          padding: [100, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            type: "gauge",
+            radius: "70%",
+            startAngle: "225",
+            endAngle: "-45",
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return "{bule|" + num + "}{white|%}";
+              },
+              rich: rich,
+              offsetCenter: ["0%", "0%"],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: "#fff",
+              offsetCenter: ["0", "75%"],
+              // width:100,
+              // height:4,
+              // borderRadius:[4,4,4,4,],
+              fontSize: 30,
+              // text: '{a|'+ dataArr.value +'}{c|%}',
+              // textStyle:{
+              //     rich:{
+              //         a:{
+              //             fontSize:100,
+              //         },
+              //         c:{
+
+              //         }
+              //     }
+              // }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 24,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: "#00377a",
+                width: 2,
+                type: "solid",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+      var chartDom = document.getElementById("tg");
+      var myChart = echarts.init(chartDom);
+      option && myChart.setOption(option);
+    },
+    kdfhzy() {
+      let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
+
+      const offsetX = 20;
+      const offsetY = 10;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+
+      const option = {
+        legend: {
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
+          data: [
+            {
+              name: "削锋",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+            {
+              name: "填谷",
+              textStyle: {
+                color: "white",
+                fontSize: 24,
+              },
+            },
+          ],
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   // formatter: function (params) {
+        //   //   const item = params[1]
+        //   //   return item.name + ' : ' + item.value
+        //   // }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitArea: false,
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: 2,
+              color: "#CEDDF2",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+              // type: "dashed",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            name: "削锋",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: 30,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#4567FF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0CC7FA",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#115DD5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0574D0",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0D7FFB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0440EB",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "填谷",
+            markPoint: {
+              data: [],
+            },
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                x: -20,
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#09E63A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#39E7C7",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C35A",
+                        },
+                        {
+                          offset: 1,
+                          color: "#09C379",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#05E6A5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#12DE63",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+      var chartDom = document.getElementById("fhzy");
+      var myChart2 = echarts.init(chartDom);
+      option && myChart2.setOption(option);
+    },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.roulist=res.data[0];
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //     addMessageListener();
+    // } else {
+    //     window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //     window.vuplex.addEventListener("message", function (event) {
+    //         let json = event.data;
+    //         console.log("JSON received" + json);
+    //     })
+    // }
+  },
+  mounted() {
+    var chartDom = document.getElementById("gang");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    var chartDom2 = document.getElementById("ruan");
+    var myChart2 = echarts.init(chartDom2);
+    this.option2 && myChart2.setOption(this.option2);
+    this.xf();
+    this.tg();
+    this.kdfhzy();
+    // this.getkdfhzy();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  // width: 100%;
+  // height: 500px;
+  margin-top: 50px;
+
+  .count {
+    color: #05f0ff;
+    font-size: 28px;
+    font-weight: 700;
+  }
+  .danwei {
+    margin-left: 10px;
+  }
+  //表体颜色
+  .el-table tr {
+    background: #16253b;
+    color: #fff;
+    font-size: 30px;
+    height: 50px;
+
+    .cell {
+      line-height: 50px;
+    }
+  }
+
+  // 去掉eltable的hover效果
+  .el-table tbody tr:hover > td {
+    background-color: #0b679e !important;
+  }
+
+  //修改表头颜色
+  .has-gutter {
+    background-color: #1969a8;
+
+    th {
+      background-color: #1969a8;
+    }
+  }
+
+  //奇偶行颜色
+  .el-table .success-row {
+    background: #184167;
+  }
+
+  //去掉边框白线
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /* 移除表头的下边框 */
+  .el-table__header th {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 1237px;
+  height: 2500px;
+  margin-left: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+
+  .kdfhzy {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox1 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdfhzy {
+      width: 100%;
+      height: 900px;
+
+      .headers {
+        width: 100%;
+        height: 320px;
+        display: flex;
+        justify-content: space-around;
+
+        #xf {
+          width: 400px;
+          height: 300px;
+        }
+
+        #tg {
+          width: 400px;
+          height: 300px;
+        }
+      }
+
+      #fhzy {
+        width: 100%;
+        height: 500px;
+      }
+    }
+  }
+
+  .fhdkcl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #fhdkcl {
+      width: 100%;
+      height: 360px;
+    }
+  }
+
+  .kdfhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fenxi {
+      width: 100%;
+      height: 600px;
+
+      h2 {
+        width: 446px;
+        height: 35px;
+        font-size: 22px;
+        font-family: SourceHanSansCN, SourceHanSansCN;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 20px;
+      }
+
+      span.title {
+        margin-left: 20px;
+        width: 186px;
+        height: 41px;
+        font-size: 42px;
+        color: #56f671;
+        line-height: 20px;
+        padding-right: 9px;
+      }
+
+      .one {
+        width: 100%;
+        height: 210px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .first_left {
+          width: 482px;
+          height: 167px;
+          background: url(../../assets/KDFH/组\ 966.png);
+          opacity: 1;
+
+          h3 {
+            width: 97px;
+            height: 53px;
+            margin-left: 208px;
+            margin-top: 20px;
+            font-size: 59px;
+            font-family: Impact;
+            color: #58fd64;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 200px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        .first_center {
+          width: 89px;
+          height: 54px;
+          background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+          opacity: 1;
+        }
+
+        .first_right {
+          width: 487px;
+          height: 168px;
+          background: url(../../assets/KDFH/组\ 965.png);
+          border-radius: 24px 3px 3px 24px;
+          opacity: 1;
+
+          h3 {
+            // width: 353px;
+            height: 53px;
+            margin-left: 160px;
+            margin-top: 20px;
+            font-size: 48px;
+            font-family: Impact;
+            text-align: center;
+            color: #03ffd8;
+            // line-height: 322px;
+          }
+
+          p {
+            margin-top: 15px;
+            margin-left: 240px;
+            width: 482px;
+            height: 67px;
+            color: #fff;
+            font-size: 36px;
+            opacity: 1;
+            // line-height: 185px;
+          }
+
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+      }
+    }
+
+    .two {
+      width: 100%;
+      height: 210px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .first_left {
+        width: 482px;
+        height: 167px;
+        background: url(../../assets/KDFH/组\ 967.png);
+        opacity: 1;
+
+        h3 {
+          width: 97px;
+          height: 53px;
+          margin-left: 240px;
+          margin-top: 20px;
+          font-size: 59px;
+          font-family: Impact;
+          color: #36b1ff;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 200px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+
+      .first_center {
+        width: 89px;
+        height: 54px;
+        background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
+        opacity: 1;
+      }
+
+      .first_right {
+        width: 487px;
+        height: 168px;
+        background: url(../../assets/KDFH/组\ 965.png);
+        border-radius: 24px 3px 3px 24px;
+        opacity: 1;
+
+        h3 {
+          width: 353px;
+          height: 53px;
+          margin-left: 160px;
+          margin-top: 20px;
+          font-size: 48px;
+          font-family: Impact;
+          text-align: center;
+          color: #03ffd8;
+          // line-height: 322px;
+        }
+
+        p {
+          margin-top: 15px;
+          margin-left: 240px;
+          width: 482px;
+          height: 67px;
+          color: #fff;
+          font-size: 36px;
+          opacity: 1;
+          // line-height: 185px;
+        }
+
+        span {
+          width: 50px;
+          height: 27px;
+          font-size: 33px;
+          margin-left: 12px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 341px;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .kdsb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox4 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #kdsb {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .gxkdfh {
+    position: relative;
+    margin-top: 158px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .five {
+      display: flex;
+      justify-content: space-around;
+
+      #gang {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  .rxkdfh {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox6 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .six {
+      display: flex;
+      justify-content: space-around;
+
+      #ruan {
+        width: 100%;
+        height: 540px;
+      }
+
+      .gang_r {
+        margin-top: 100px;
+
+        .g_one {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_one {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background: #2eedaf;
+            border-radius: 3px 3px 3px 3px;
+            margin-right: 20px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            font-family: TRENDS;
+            color: #2eedaf;
+            line-height: 22px;
+          }
+        }
+
+        .g_two {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_two {
+            width: 34px;
+            height: 34px;
+            display: block;
+            margin-right: 20px;
+            background: #2eedd8;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #2eedd8;
+            line-height: 22px;
+          }
+        }
+
+        .g_three {
+          width: 600px;
+          height: auto;
+          height: 34px;
+          font-size: 22px;
+          font-family: MicrosoftYaHei, MicrosoftYaHei;
+          font-weight: bold;
+          display: flex;
+          margin-bottom: 100px;
+          color: #ffffff;
+
+          .gang_three {
+            width: 34px;
+            height: 34px;
+            margin-right: 20px;
+            display: block;
+            background: #9acafd;
+            border-radius: 3px 3px 3px 3px;
+            opacity: 1;
+          }
+
+          .gang_count {
+            width: 55px;
+            height: 43px;
+            font-size: 34px;
+            margin-left: 10px;
+            margin-right: 40px;
+            font-family: TRENDS;
+            color: #9acafd;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    // p {
+    //     position: absolute;
+    //     color: #fff;
+    //     top: 20px;
+    //     right: 1008px;
+    //     font-size: 30px;
+    //     font-family: "MicrosoftYaHei";
+    // }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214104414.vue b/.history/src/views/Zhou/ZNYWJK_20231214104414.vue
new file mode 100644
index 0000000..1a63559
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214104414.vue
@@ -0,0 +1,1587 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        ::-webkit-scrollbar {
+          width: 4px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        ::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        ::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+          background-color: #f00;
+        }
+        /* 选中滚动条按钮 */
+        ::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+
+        /* 选中向上箭头 */
+        ::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        ::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214104456.vue b/.history/src/views/Zhou/ZNYWJK_20231214104456.vue
new file mode 100644
index 0000000..b276efb
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214104456.vue
@@ -0,0 +1,1585 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        ::-webkit-scrollbar {
+          width: 4px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        ::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        ::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+          background-color: #f00;
+        }
+        /* 选中滚动条按钮 */
+        ::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        ::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        ::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214104519.vue b/.history/src/views/Zhou/ZNYWJK_20231214104519.vue
new file mode 100644
index 0000000..779409b
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214104519.vue
@@ -0,0 +1,1620 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        ::-webkit-scrollbar {
+          width: 4px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        ::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        ::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+          background-color: #f00;
+        }
+        /* 选中滚动条按钮 */
+        ::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        ::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        ::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        ::-webkit-scrollbar {
+          width: 4px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        ::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        ::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+          background-color: #f00;
+        }
+        /* 选中滚动条按钮 */
+        ::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        ::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        ::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214104530.vue b/.history/src/views/Zhou/ZNYWJK_20231214104530.vue
new file mode 100644
index 0000000..c2409f5
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214104530.vue
@@ -0,0 +1,1620 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        ::-webkit-scrollbar {
+          width: 4px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        ::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        ::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+          background-color: #f00;
+        }
+        /* 选中滚动条按钮 */
+        ::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        ::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        ::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        ::-webkit-scrollbar {
+          width: 2px;
+          height: 3px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        ::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        ::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+          background-color: #f00;
+        }
+        /* 选中滚动条按钮 */
+        ::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        ::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        ::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214104548.vue b/.history/src/views/Zhou/ZNYWJK_20231214104548.vue
new file mode 100644
index 0000000..afc3913
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214104548.vue
@@ -0,0 +1,1620 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        ::-webkit-scrollbar {
+          width: 4px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        ::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        ::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+          background-color: #f00;
+        }
+        /* 选中滚动条按钮 */
+        ::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        ::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        ::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        ::-webkit-scrollbar {
+          width: 4px;
+          height: 3px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        ::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        ::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+          background-color: #f00;
+        }
+        /* 选中滚动条按钮 */
+        ::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        ::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        ::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214104609.vue b/.history/src/views/Zhou/ZNYWJK_20231214104609.vue
new file mode 100644
index 0000000..42ae3ad
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214104609.vue
@@ -0,0 +1,1586 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        ::-webkit-scrollbar {
+          width: 4px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        ::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        ::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+          background-color: #f00;
+        }
+        /* 选中滚动条按钮 */
+        ::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        ::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        ::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214105515.vue b/.history/src/views/Zhou/ZNYWJK_20231214105515.vue
new file mode 100644
index 0000000..0697d01
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214105515.vue
@@ -0,0 +1,1586 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 4px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+          background-color: #f00;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214105757.vue b/.history/src/views/Zhou/ZNYWJK_20231214105757.vue
new file mode 100644
index 0000000..206905d
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214105757.vue
@@ -0,0 +1,1586 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 5px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+          background-color: #f00;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214105811.vue b/.history/src/views/Zhou/ZNYWJK_20231214105811.vue
new file mode 100644
index 0000000..f79a0b8
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214105811.vue
@@ -0,0 +1,1585 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 5px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214105829.vue b/.history/src/views/Zhou/ZNYWJK_20231214105829.vue
new file mode 100644
index 0000000..d9511cc
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214105829.vue
@@ -0,0 +1,1586 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 5px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214105934.vue b/.history/src/views/Zhou/ZNYWJK_20231214105934.vue
new file mode 100644
index 0000000..d9511cc
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214105934.vue
@@ -0,0 +1,1586 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 5px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110001.vue b/.history/src/views/Zhou/ZNYWJK_20231214110001.vue
new file mode 100644
index 0000000..d9511cc
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110001.vue
@@ -0,0 +1,1586 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 5px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110005.vue b/.history/src/views/Zhou/ZNYWJK_20231214110005.vue
new file mode 100644
index 0000000..fc573f4
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110005.vue
@@ -0,0 +1,1586 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110011.vue b/.history/src/views/Zhou/ZNYWJK_20231214110011.vue
new file mode 100644
index 0000000..fc573f4
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110011.vue
@@ -0,0 +1,1586 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110024.vue b/.history/src/views/Zhou/ZNYWJK_20231214110024.vue
new file mode 100644
index 0000000..68d1b91
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110024.vue
@@ -0,0 +1,1585 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110047.vue b/.history/src/views/Zhou/ZNYWJK_20231214110047.vue
new file mode 100644
index 0000000..c3dce00
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110047.vue
@@ -0,0 +1,1587 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110111.vue b/.history/src/views/Zhou/ZNYWJK_20231214110111.vue
new file mode 100644
index 0000000..00060d7
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110111.vue
@@ -0,0 +1,1587 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110114.vue b/.history/src/views/Zhou/ZNYWJK_20231214110114.vue
new file mode 100644
index 0000000..8368550
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110114.vue
@@ -0,0 +1,1586 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110354.vue b/.history/src/views/Zhou/ZNYWJK_20231214110354.vue
new file mode 100644
index 0000000..3974135
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110354.vue
@@ -0,0 +1,1585 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110401.vue b/.history/src/views/Zhou/ZNYWJK_20231214110401.vue
new file mode 100644
index 0000000..bb24fff
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110401.vue
@@ -0,0 +1,1620 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110500.vue b/.history/src/views/Zhou/ZNYWJK_20231214110500.vue
new file mode 100644
index 0000000..e988db4
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110500.vue
@@ -0,0 +1,1619 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110501.vue b/.history/src/views/Zhou/ZNYWJK_20231214110501.vue
new file mode 100644
index 0000000..e988db4
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110501.vue
@@ -0,0 +1,1619 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          // background: #6C1C00;
+          // opacity: 1;
+          // border: 1px solid #FF4200;
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110655.vue b/.history/src/views/Zhou/ZNYWJK_20231214110655.vue
new file mode 100644
index 0000000..80fd366
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110655.vue
@@ -0,0 +1,1616 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110705.vue b/.history/src/views/Zhou/ZNYWJK_20231214110705.vue
new file mode 100644
index 0000000..80fd366
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110705.vue
@@ -0,0 +1,1616 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110735.vue b/.history/src/views/Zhou/ZNYWJK_20231214110735.vue
new file mode 100644
index 0000000..80fd366
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110735.vue
@@ -0,0 +1,1616 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214110820.vue b/.history/src/views/Zhou/ZNYWJK_20231214110820.vue
new file mode 100644
index 0000000..a65780d
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214110820.vue
@@ -0,0 +1,1616 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214111648.vue b/.history/src/views/Zhou/ZNYWJK_20231214111648.vue
new file mode 100644
index 0000000..71a8b0e
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214111648.vue
@@ -0,0 +1,1617 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          margin-right: 5px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214111736.vue b/.history/src/views/Zhou/ZNYWJK_20231214111736.vue
new file mode 100644
index 0000000..a65780d
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214111736.vue
@@ -0,0 +1,1616 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214111741.vue b/.history/src/views/Zhou/ZNYWJK_20231214111741.vue
new file mode 100644
index 0000000..8b0ce8b
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214111741.vue
@@ -0,0 +1,1617 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          margin-right: 5px;
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214111746.vue b/.history/src/views/Zhou/ZNYWJK_20231214111746.vue
new file mode 100644
index 0000000..7ca8f27
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214111746.vue
@@ -0,0 +1,1617 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          margin-left: 5px;
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214111806.vue b/.history/src/views/Zhou/ZNYWJK_20231214111806.vue
new file mode 100644
index 0000000..f03e3af
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214111806.vue
@@ -0,0 +1,1618 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          margin-left: 5px;
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          margin-left: 5px;
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214111809.vue b/.history/src/views/Zhou/ZNYWJK_20231214111809.vue
new file mode 100644
index 0000000..7a0965f
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214111809.vue
@@ -0,0 +1,1619 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          margin-left: 5px;
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          margin-left: 5px;
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          margin-left: 5px;
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214111813.vue b/.history/src/views/Zhou/ZNYWJK_20231214111813.vue
new file mode 100644
index 0000000..9276c06
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214111813.vue
@@ -0,0 +1,1620 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          margin-left: 5px;
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          margin-left: 5px;
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          margin-left: 5px;
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          margin-left: 5px;
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214111817.vue b/.history/src/views/Zhou/ZNYWJK_20231214111817.vue
new file mode 100644
index 0000000..7a0965f
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214111817.vue
@@ -0,0 +1,1619 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          margin-left: 5px;
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          margin-left: 5px;
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          margin-left: 5px;
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214111822.vue b/.history/src/views/Zhou/ZNYWJK_20231214111822.vue
new file mode 100644
index 0000000..4b7c7ed
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214111822.vue
@@ -0,0 +1,1620 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          margin-left: 5px;
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          margin-left: 5px;
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          margin-left: 5px;
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            margin-left: 5px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214111829.vue b/.history/src/views/Zhou/ZNYWJK_20231214111829.vue
new file mode 100644
index 0000000..ca30055
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214111829.vue
@@ -0,0 +1,1620 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          margin-left: 5px;
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          margin-left: 5px;
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          margin-left: 5px;
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            margin-right: 5px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214111834.vue b/.history/src/views/Zhou/ZNYWJK_20231214111834.vue
new file mode 100644
index 0000000..8816e8e
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214111834.vue
@@ -0,0 +1,1620 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          margin-left: 5px;
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          margin-left: 5px;
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          margin-left: 5px;
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            margin-right: 10px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214111915.vue b/.history/src/views/Zhou/ZNYWJK_20231214111915.vue
new file mode 100644
index 0000000..65c5389
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214111915.vue
@@ -0,0 +1,1617 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          margin-right: 10px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214111931.vue b/.history/src/views/Zhou/ZNYWJK_20231214111931.vue
new file mode 100644
index 0000000..6a06f99
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214111931.vue
@@ -0,0 +1,1617 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          margin-right: 10px;
+          // overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214111957.vue b/.history/src/views/Zhou/ZNYWJK_20231214111957.vue
new file mode 100644
index 0000000..65c5389
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214111957.vue
@@ -0,0 +1,1617 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          margin-right: 10px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214112025.vue b/.history/src/views/Zhou/ZNYWJK_20231214112025.vue
new file mode 100644
index 0000000..9c327c1
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214112025.vue
@@ -0,0 +1,1617 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1130px;
+          height: 145px;
+          margin-right: 10px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214112045.vue b/.history/src/views/Zhou/ZNYWJK_20231214112045.vue
new file mode 100644
index 0000000..65c5389
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214112045.vue
@@ -0,0 +1,1617 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          margin-right: 10px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214112046.vue b/.history/src/views/Zhou/ZNYWJK_20231214112046.vue
new file mode 100644
index 0000000..65c5389
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214112046.vue
@@ -0,0 +1,1617 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1120px;
+          height: 145px;
+          margin-right: 10px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214112051.vue b/.history/src/views/Zhou/ZNYWJK_20231214112051.vue
new file mode 100644
index 0000000..9c327c1
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214112051.vue
@@ -0,0 +1,1617 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1130px;
+          height: 145px;
+          margin-right: 10px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214112117.vue b/.history/src/views/Zhou/ZNYWJK_20231214112117.vue
new file mode 100644
index 0000000..69c0a11
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214112117.vue
@@ -0,0 +1,1618 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1130px;
+          height: 145px;
+          margin-right: 10px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+            padding-left: 10px;
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 81px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214112211.vue b/.history/src/views/Zhou/ZNYWJK_20231214112211.vue
new file mode 100644
index 0000000..6a13bd9
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214112211.vue
@@ -0,0 +1,1618 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1130px;
+          height: 145px;
+          margin-right: 10px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+            padding-left: 10px;
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 72px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214112221.vue b/.history/src/views/Zhou/ZNYWJK_20231214112221.vue
new file mode 100644
index 0000000..2318645
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214112221.vue
@@ -0,0 +1,1619 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1130px;
+          height: 145px;
+          margin-right: 10px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+            padding-left: 10px;
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 72px;
+          border-radius: 10px;
+          padding-left: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214112543.vue b/.history/src/views/Zhou/ZNYWJK_20231214112543.vue
new file mode 100644
index 0000000..6a13bd9
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214112543.vue
@@ -0,0 +1,1618 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1130px;
+          height: 145px;
+          margin-right: 10px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+            padding-left: 10px;
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 72px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214112629.vue b/.history/src/views/Zhou/ZNYWJK_20231214112629.vue
new file mode 100644
index 0000000..b55f896
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214112629.vue
@@ -0,0 +1,1619 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1130px;
+          height: 145px;
+          margin-right: 10px;
+          overflow: auto;
+          display: flex;
+          &::-webkit-scrollbar {
+            padding-left: 10px;
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 72px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214112727.vue b/.history/src/views/Zhou/ZNYWJK_20231214112727.vue
new file mode 100644
index 0000000..6a13bd9
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214112727.vue
@@ -0,0 +1,1618 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1130px;
+          height: 145px;
+          margin-right: 10px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+            padding-left: 10px;
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 72px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231214113028.vue b/.history/src/views/Zhou/ZNYWJK_20231214113028.vue
new file mode 100644
index 0000000..14eb9d2
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231214113028.vue
@@ -0,0 +1,1619 @@
+<template>
+  <div class="box">
+    <div class="a">
+      <img
+        src="../../assets/img/可调负荷/可调图标--未选中.png"
+        alt=""
+        @click="sendMessageToCSharp"
+      />
+    </div>
+    <div class="left">
+      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
+      <div class="dqsxtxx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>当前摄像头信息</p>
+        </div>
+        <div id="dqsxtxx">
+          <div class="headers">
+            <iframe
+              :src="'webs/index.html' + '?1?221.214.127.18'"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              ref="videos"
+            ></iframe>
+            <p class="h_footer">
+              <!-- <span class="time">{{ dates }}</span> -->
+              <img
+                src="../../assets/ZNYWJK/放大.png"
+                alt=""
+                class="quanping"
+                @click="handleFullScreen"
+              />
+            </p>
+          </div>
+          <h2>摄像头信息</h2>
+          <div class="footers">
+            <div class="one">
+              <p>鲁西平阴厂区全景</p>
+            </div>
+            <div class="two">
+              <p>网络数据</p>
+            </div>
+            <div class="three">
+              <p>1920*1080</p>
+            </div>
+            <div class="four">
+              <p>5ms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="spjk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头视频监控</p>
+        </div>
+        <div id="spjk">
+          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
+            <div class="jiankong">
+              <iframe
+                :src="'webs/index.html?' + item.channel + '?' + item.ip"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+            <div class="spjk_title">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="sxtlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>摄像头列表</p>
+        </div>
+        <div id="sxtlb">
+          <div class="data">
+            <span
+              :class="res == '生产监控系统' ? 'active' : ''"
+              @click="res = '生产监控系统'"
+              >生产监控系统</span
+            >
+            <span
+              :class="res == '配电室监控系统' ? 'active' : ''"
+              @click="res = '配电室监控系统'"
+              >配电室监控系统</span
+            >
+          </div>
+          <div class="con">
+            <div class="con1" v-for="(item,index) in jklist1">
+            <p>监控{{index+1}}：{{ item.name }}</p>
+            <p>{{ item.date }}</p>
+            </div>
+            <!-- <div class="con1">
+              <p>监控17：回转窑南侧</p>
+              <p>07:12:18</p>
+            </div>
+            <div class="con2">
+              <p>监控16：篦冷机</p>
+              <p>07:12:18</p>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="wdjc1">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测1</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc1">
+            <div class="hpfj">
+              <h2>1#后排风机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="hpfj">
+              <h2>1#窑主电机</h2>
+              <div class="nei">
+                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="green">{{ item.count }}</p>
+                  <p class="bianhao">编号：{{ item.bianhao }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wdjc2">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>温度监测2</p>
+        </div>
+        <div class="chartBox">
+          <div class="selects">
+            <el-select
+              v-model="value"
+              :popper-append-to-body="false"
+              class="custom-select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :popper-append-to-body="false"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div id="wdjc2">
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+            <div class="controls">
+              <h3>智能操控装置</h3>
+              <ul>
+                <li v-for="item in list">
+                  <span>{{ item.name }}：</span>
+                  <span class="blue">{{ item.count }}</span>
+                  <span>℃</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import screenfull from "screenfull";
+export default {
+  data() {
+    return {
+      fjlist: [
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#后排风机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      fjlist2: [
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+        {
+          name: "1#窑主电机上动触头A相",
+          count: "0.0",
+          bianhao: "139671",
+        },
+      ],
+      list: [
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+        {
+          name: "上静触头A相温度",
+          count: "0.0",
+        },
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "线路测温",
+        },
+        {
+          value: "选项2",
+          label: "设备测温",
+        },
+        {
+          value: "选项3",
+          label: "线路测温",
+        },
+        {
+          value: "选项4",
+          label: "线路测温",
+        },
+        {
+          value: "选项5",
+          label: "线路测温",
+        },
+      ],
+      value: "设备测温",
+      res: "生产监控系统",
+      tableData: [
+        {
+          date1: "水泥单位产品综合能耗",
+          date2: "80kgce/t",
+          date3: "84kgce/t",
+          date4: "5%",
+        },
+        {
+          date1: "水泥大内产品综合电耗",
+          date2: "40kWh/t",
+          date3: "53kWh/t",
+          date4: "32.5%",
+        },
+        {
+          date1: "熟料单位产品综合能耗",
+          date2: "100kgce/t",
+          date3: "114kgce/t",
+          date4: "14%",
+        },
+        {
+          date1: "熟料单位产品综合电耗",
+          date2: "48kWh/t",
+          date3: "55kWh/t",
+          date4: "14.58%",
+        },
+        {
+          date1: "熟料单位产品综合煤耗",
+          date2: "94kgce/",
+          date3: "108kgce/",
+          date4: "14.89%",
+        },
+      ],
+      devices: [
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "篦冷机",
+          date2: true,
+          date3: "45.00",
+        },
+        {
+          date1: "生料收尘",
+          date2: false,
+          date3: "102.00",
+        },
+        {
+          date1: "回转窑",
+          date2: true,
+          date3: "29.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: false,
+          date3: "45.00",
+        },
+      ],
+      sxtlist: [
+        {
+          channel: "9",
+          ip: "221.214.127.18",
+          name: "2号窑尾取样处",
+        },
+        {
+          channel: "12",
+          ip: "221.214.127.18",
+          name: "1号泥磨取样处",
+        },
+        {
+          channel: "6",
+          ip: "221.214.127.18",
+          name: "2号窑尾监测房",
+        },
+        {
+          channel: "10",
+          ip: "221.214.127.18",
+          name: "1号窑尾取样处",
+        },
+        {
+          channel: "3",
+          ip: "221.214.127.18",
+          name: "2号窑头取样处",
+        },
+
+        {
+          channel: "13",
+          ip: "221.214.127.18",
+          name: "3号窑尾监测房",
+        },
+        {
+          channel: "5",
+          ip: "221.214.127.18",
+          name: "2号窑头监测房",
+        },
+        {
+          channel: "15",
+          ip: "221.214.127.18",
+          name: "3号窑头监测房",
+        },
+      ],
+      // dates: new Date(),
+      isFullScreenTag: false,
+      jklist1:[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维-监控");
+      this.$router.push("/znyw");
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    handleFullScreen() {
+      screenfull.toggle(this.$refs.videos);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+  mounted() {},
+  watch:{
+    res:{
+      handler(to){
+        console.log(to);
+        if(to=="配电室监控系统"){
+          this.jklist1=[
+          {
+          name:"水泥磨西二排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高浓度收尘",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨东小配电间",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西3排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨高密吸尘",
+          date:"07:12:18",
+        },
+        //2
+        {
+          name:"水泥磨西二排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西1排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西2排北向南",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西南角",
+          date:"07:12:18",
+        },        {
+          name:"水泥磨西1排南向北",
+          date:"07:12:18",
+        },
+        {
+          name:"水泥磨西四排北向南",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"二期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"二期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期煤磨西2排北向",
+          date:"07:12:18",
+        },        {
+          name:"2期煤磨西1排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排1北向",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"2期窑头西排3北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排5北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西排4北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西排4北向",
+          date:"07:12:18",
+        },        {
+          name:"2期窑头弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西三排",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"1期窑头西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"2期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期窑头弱电间",
+          date:"07:12:18",
+        },        {
+          name:"1期生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西北配电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"1期生料磨西南配电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑头西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期煤磨西一排",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"1期生料磨西三排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排南向",
+          date:"07:12:18",
+        },        {
+          name:"1期煤磨西二排",
+          date:"07:12:18",
+        },
+        {
+          name:"1期生料磨西二排北向",
+          date:"07:12:18",
+        },        //2
+        {
+          name:"二期原料磨西二排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾东向",
+          date:"07:12:18",
+        },
+        {
+          name:"一期窑尾弱电间",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室西向",
+          date:"07:12:18",
+        },        {
+          name:"矿山1",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料弱电间",
+          date:"07:12:18",
+        },
+                //3
+                {
+          name:"矿山东头北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原材料配电室东向1",
+          date:"07:12:18",
+        },
+        {
+          name:"变电所-枪东",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨西二排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨北头配电间",
+          date:"07:12:18",
+        },
+                        //3
+                        {
+          name:"原生料磨西一排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西一排南向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排北向",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西四排南向",
+          date:"07:12:18",
+        },        {
+          name:"原生料磨弱电机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨南小机房",
+          date:"07:12:18",
+        },
+        {
+          name:"原生料磨西三排北向",
+          date:"07:12:18",
+        },        {
+          name:"1期窑尾西向",
+          date:"07:12:18",
+        },
+        {
+          name:"1#框架电力仓库",
+          date:"07:12:18",
+        },
+          ]
+        }else{
+          this.jklist1=[
+        {
+          name:"鲁西平阴厂区全景",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑头取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑头监测房",
+          date:"07:12:18",
+        },        {
+          name:"2号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"鲁西平阴1号2号3号",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"2号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"1号窑尾取样处",
+          date:"07:12:18",
+        },        {
+          name:"辅材均化棚北",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥磨取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"原煤均化棚",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头监测房",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑头在线监测",
+          date:"07:12:18",
+        },        {
+          name:"3号生料库顶取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号窑尾取样处",
+          date:"07:12:18",
+        },
+        {
+          name:"3号煤磨在线监测",
+          date:"07:12:18",
+        },
+        {
+          name:"1号水泥在线监测",
+          date:"07:12:18",
+        },
+      ]
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    }
+    
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  padding-top: 400px;
+  justify-content: space-between;
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 1300px;
+    z-index: 2;
+    top: 420px;
+    right: 480px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+
+  .left {
+    width: 1237px;
+    height: 2500px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .dqsxtxx {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      #dqsxtxx {
+        margin-top: 50px;
+        width: 1151px;
+        height: 800px;
+        .headers {
+          margin-left: 50px;
+          width: 1041px;
+          height: 586px;
+          opacity: 1;
+          position: relative;
+          .videos {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+          }
+          .videos1 {
+            width: 1041px;
+            height: 586px;
+            opacity: 1;
+            display: none;
+          }
+          .h_footer {
+            width: 1040px;
+            height: 58px;
+            background: #1f1f1f;
+            opacity: 0.45;
+            position: absolute;
+            bottom: 0px;
+            .time {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              left: 20px;
+              width: 300px;
+            }
+            .quanping {
+              color: #fff;
+              border: none;
+              font-size: 20px;
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+
+        h2 {
+          margin-left: 40px !important;
+          margin-top: 10px;
+          width: 184px;
+          height: 37px;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .footers {
+          width: 100%;
+          height: 200px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: space-around;
+
+          .one {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/1.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 236px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              // left: 30%;
+              top: 50%;
+              margin-left: 96px;
+              transform: translateY(50%);
+            }
+          }
+
+          .two {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/2.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .three {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/3.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 20px;
+              transform: translate(50%, 50%);
+            }
+          }
+
+          .four {
+            width: 497px;
+            height: 80px;
+            background: url(../../assets/ZNYWJK/4.png);
+            background-size: cover;
+            position: relative;
+
+            p {
+              width: 166px;
+              height: 33px;
+              font-size: 28px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              left: 50%;
+              top: 50%;
+              margin-left: 40px;
+              transform: translate(50%, 50%);
+            }
+          }
+        }
+      }
+    }
+
+    .spjk {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #spjk {
+        width: 1155px;
+        height: 800px;
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-items: center;
+        overflow-y: auto;
+        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
+        &::-webkit-scrollbar {
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 241px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+        .spjk_one {
+          width: 551px;
+          height: 383px;
+          // background: #1969A8;
+          margin-bottom: 20px;
+          opacity: 1;
+          border: none;
+
+          .jiankong {
+            width: 100%;
+            height: 323px;
+            video {
+              border: none;
+              width: 551px;
+              height: 301px;
+              opacity: 1;
+            }
+          }
+
+          .spjk_title {
+            width: 100%;
+            height: 60px;
+            font-size: 28px;
+            text-align: center;
+            font-family: MicrosoftYaHei;
+            background: #1969a8;
+            color: #ffffff;
+            line-height: 60px;
+          }
+        }
+      }
+    }
+
+    .sxtlb {
+      position: relative;
+      margin-top: 56px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sxtlb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+        .data {
+          position: absolute;
+          font-size: 28px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          right: 0;
+          top: 120px;
+          z-index: 1;
+          span {
+            width: 240px;
+            height: 38px;
+            margin: 10px;
+            display: block;
+            line-height: 38px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .active {
+            background: linear-gradient(
+              to right,
+              rgba(33, 76, 124, 0.3) 20%,
+              rgba(152, 207, 230, 0.3) 100%,
+              rgba(33, 76, 124, 0.3) 20%
+            );
+          }
+        }
+
+        .con {
+          margin-top: 100px;
+          width: 1130px;
+          height: 145px;
+          margin-right: 10px;
+          overflow: auto;
+          &::-webkit-scrollbar {
+            padding-left: 10px;
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          margin-right: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 72px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
+          .con1,
+          .con2 {
+            width: 100%;
+            margin-bottom: 12px;
+            height: 70px;
+            padding: 0px 80px 0px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+            box-sizing: border-box;
+          }
+
+          .con1 {
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+
+          .con2 {
+            margin-top: 20px;
+            background: url(../../assets/ZNYWJK/蓝.png);
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .wdjc1 {
+      position: relative;
+      margin-top: 120px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 100px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          // font-size: 30px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/ .el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc1 {
+          width: 1156px;
+          height: 960px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          .hpfj {
+            width: 1154px;
+            height: 471px;
+            background: url(../../assets/ZNYWJK/风机框.png);
+            background-size: cover;
+            margin-bottom: 40px;
+
+            // background: #0184AA;
+            // opacity: 1;
+            // border: 1px solid #0EE0ED;
+            h2 {
+              color: #fff;
+              padding: 20px;
+            }
+
+            .nei {
+              width: 100%;
+              height: 380px;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              align-content: space-around;
+              flex-wrap: wrap;
+
+              // flex-direction: column;
+              .ones {
+                margin-left: 12px;
+                width: 350px;
+                padding-left: 10px;
+                padding-top: 10px;
+                height: 163px;
+                font-size: 30px;
+                margin-right: 20px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/风机内框.png);
+
+                // background: #00F0FF;
+                // opacity: 0.2;
+                // border: NaNpx solid #00F0FF;
+                .green {
+                  text-align: center;
+                  color: #51ff72;
+                  height: 80px;
+                  font-size: 40px;
+                  line-height: 80px;
+                }
+
+                .bianhao {
+                  font-size: 22px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .wdjc2 {
+      position: relative;
+      margin-top: 60px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 120px;
+        position: relative;
+
+        .selects {
+          position: absolute;
+          right: 20px;
+          top: -60px;
+          z-index: 1000;
+
+          //下拉框的颜色改变
+          .custom-select /deep/ .el-input__inner {
+            color: #fff !important;
+            font-size: 20px;
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的背景颜色及边框属性； */
+          .custom-select /deep/.el-select-dropdown {
+            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
+            border-radius: 10px 10px 10px 10px;
+            opacity: 1;
+            border: 2px solid #06cdff !important;
+            background: #1d3349 !important;
+          }
+
+          /* // 设置下拉框的字体属性及背景颜色； */
+          .custom-select /deep/.el-select-dropdown__item {
+            font-size: 18px;
+            color: #fff;
+            font-weight: 200;
+            background: #1d3349 !important;
+          }
+
+          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
+          .custom-select /deep/.el-select-dropdown__list {
+            /* padding-top: 10px; */
+            padding: 0;
+          }
+
+          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
+          .custom-select /deep/.el-popper[x-placement^="bottom"] {
+            margin-top: 5px;
+          }
+
+          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
+          .custom-select /deep/.el-popper .popper__arrow,
+          .custom-select /deep/.el-popper .popper__arrow::after {
+            display: none;
+          }
+
+          /* // 设置鼠标悬停在下拉框列表的悬停色； */
+          .custom-select /deep/.el-select-dropdown__item:hover {
+            color: rgb(213, 215, 230);
+            background-color: #326aff;
+          }
+
+          .custom-select /deep/ .el-select-dropdown {
+            position: absolute;
+            top: 40px !important;
+            left: 0px !important;
+          }
+        }
+
+        #wdjc2 {
+          width: 1156px;
+          height: 883px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          h3 {
+            text-align: center;
+            font-size: 30px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+
+          .controls {
+            width: 512px;
+            height: 883px;
+            background: url(../../assets/ZNYWJK/竖框.png);
+
+            ul {
+              width: 100%;
+              list-style: none;
+              box-sizing: border-box;
+
+              li {
+                width: 456px;
+                margin: 0 auto;
+                margin-top: 20px;
+                padding: 0px 30px;
+                height: 64px;
+                line-height: 64px;
+                font-size: 28px;
+                box-sizing: border-box;
+                background: url(../../assets/ZNYWJK/输入框.png);
+
+                .blue {
+                  margin: 0px 20px 10px;
+                  margin-left: 30px;
+                  color: #0ee5ff;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/api/kdfh.js b/src/api/kdfh.js
new file mode 100644
index 0000000..e650e47
--- /dev/null
+++ b/src/api/kdfh.js
@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+// 可调负荷分析
+export function GetKdfhfx () {
+    return request({
+      url: `//GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
+// 刚性可调负荷
+export function GetGang () {
+    return request({
+      url: `//GetRigidAdjustableLoads`,
+      method: 'GET'
+    })
+  }
+//   柔性可调负荷
+  export function GetRou () {
+    return request({
+      url: `//GetFlexibleAdjustableLoad`,
+      method: 'GET'
+    })
+  }
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
index 160351f..332ec13 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -2,7 +2,7 @@
 import axios from "axios";
 import { Message } from "element-ui"; // 请确保你的项目中已经安装了 Element UI
 const request = axios.create({
-  baseURL: "", // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  baseURL: "https://localhost:44352/api/", // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
   timeout: 5000, // 请求超时：当5s没有响应就会结束请求
 });
 
diff --git a/src/views/Zhou/KDFH.vue b/src/views/Zhou/KDFH.vue
index 9b3c48b..0707851 100644
--- a/src/views/Zhou/KDFH.vue
+++ b/src/views/Zhou/KDFH.vue
@@ -34,14 +34,22 @@
               style="width: 100%"
               :row-class-name="tableRowClassName"
             >
-              <el-table-column prop="date1" label="调控等级" align="center">
+              <el-table-column
+                prop="LevelRegulation"
+                label="调控等级"
+                align="center"
+              >
               </el-table-column>
-              <el-table-column prop="date2" label="目标" align="center">
+              <el-table-column prop="Target" label="目标" align="center">
                 <template scope="scope">
-                  <span class="count">{{ scope.row.date2 }}</span>
+                  <span class="count">{{ scope.row.Target }}kW</span>
                 </template>
               </el-table-column>
-              <el-table-column prop="date3" label="执行时长" align="center">
+              <el-table-column
+                prop="ExecutionTime"
+                label="执行时长"
+                align="center"
+              >
               </el-table-column>
             </el-table>
           </div>
@@ -53,26 +61,26 @@
           <p>可调负荷分析</p>
         </div>
         <div class="fenxi">
-          <h2>基线负荷:<span class="title">3138</span>kW</h2>
+          <h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
           <div class="one">
             <div class="first_left">
-              <h3>500<span>kW</span></h3>
+              <h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
               <p>可参与削锋负荷</p>
             </div>
             <div class="first_center"></div>
             <div class="first_right">
-              <h3>5100<span>元</span></h3>
+              <h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
               <p>单次补贴金额</p>
             </div>
           </div>
           <div class="two">
             <div class="first_left">
-              <h3>300<span>kW</span></h3>
+              <h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
               <p>可参与填谷负荷</p>
             </div>
             <div class="first_center"></div>
             <div class="first_right">
-              <h3>1540<span>元</span></h3>
+              <h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
               <p>单次补贴金额</p>
             </div>
           </div>
@@ -124,19 +132,19 @@
             <div class="g_one">
               <span class="gang_one"></span>
               <span>设备数量：</span>
-              <span class="gang_count">38</span>
+              <span class="gang_count">{{ ganglist.QuantityFacility }}</span>
               <span>个</span>
             </div>
             <div class="g_two">
               <span class="gang_two"></span>
               <span>刚性可调负荷：</span>
-              <span class="gang_count">1348</span>
+              <span class="gang_count">{{ganglist.Rigidity}}</span>
               <span>kW</span>
             </div>
             <div class="g_three">
               <span class="gang_three"></span>
               <span>总可调负荷：</span>
-              <span class="gang_count">4348</span>
+              <span class="gang_count">{{ ganglist.GrossValue }}</span>
               <span>kW</span>
             </div>
           </div>
@@ -153,19 +161,19 @@
             <div class="g_one">
               <span class="gang_one"></span>
               <span>设备数量：</span>
-              <span class="gang_count">38</span>
+              <span class="gang_count">{{roulist.QuantityFacility}}</span>
               <span>个</span>
             </div>
             <div class="g_two">
               <span class="gang_two"></span>
               <span>刚性可调负荷：</span>
-              <span class="gang_count">1348</span>
+              <span class="gang_count">{{ roulist.Flexible }}</span>
               <span>kW</span>
             </div>
             <div class="g_three">
               <span class="gang_three"></span>
               <span>总可调负荷：</span>
-              <span class="gang_count">4348</span>
+              <span class="gang_count">{{ roulist.GrossValue}}</span>
               <span>kW</span>
             </div>
           </div>
@@ -177,25 +185,26 @@
 <script>
 import "../../utils/echarts-liquidfill.min.js";
 import * as echarts from "echarts";
+import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
 export default {
   name: "FHGL",
   data() {
     return {
       plan: [
         {
-          date1: "一级",
-          date2: "102.00kW",
-          date3: "5分钟",
+          LevelRegulation: "一级",
+          Target: "102.00",
+          ExecutionTime: "5分钟",
         },
         {
-          date1: "一级",
-          date2: "29.00kW",
-          date3: "30分钟",
+          LevelRegulation: "一级",
+          Target: "29.00",
+          ExecutionTime: "30分钟",
         },
         {
-          date1: "一级",
-          date2: "45.00kW",
-          date3: "1小时",
+          LevelRegulation: "一级",
+          Target: "45.00",
+          ExecutionTime: "1小时",
         },
       ],
       devices: [
@@ -238,9 +247,9 @@ export default {
             radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
             center: ["50%", "50%"],
             data: [
-              0.6,
               {
                 value: 0.6,
+                all:100,
                 direction: "left", //波浪方向
               },
             ], // data个数代表波浪数
@@ -272,7 +281,10 @@ export default {
             ],
             label: {
               normal: {
-                formatter: 55 + "{d|%}",
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
                 rich: {
                   d: {
                     fontSize: 36,
@@ -343,7 +355,6 @@ export default {
             radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
             center: ["50%", "50%"],
             data: [
-              0.6,
               {
                 value: 0.6,
                 direction: "left", //波浪方向
@@ -377,7 +388,10 @@ export default {
             ],
             label: {
               normal: {
-                formatter: 55 + "{d|%}",
+                formatter: function(params){
+                  console.log(params);
+                  return params.value * 100+ "{d|%}";
+                },
                 rich: {
                   d: {
                     fontSize: 36,
@@ -440,6 +454,24 @@ export default {
           },
         ],
       },
+
+      //可调负荷资源
+      xfdata: 53,
+      tgdata: 42,
+      xflist: [9.3, 7.0, 7.0, 6.0],
+      tglist: [9.3, 7.0, 7.0, 6.0],
+      //可调负荷分析
+      kdfhfxlist: {
+        BaseLoad: 19365, //基线负荷
+        PeakClipping: 13329, //削峰数值
+        ValleyFilling: 6036, //填谷数值
+        PeakingAmount: 186472.71, //削峰补贴
+        ValleyFillingAmount: 19254.84, //填谷补贴
+      },
+      // 刚性可调负荷
+      ganglist:[],
+      // 柔性可调负荷
+      roulist:[],
     };
   },
   methods: {
@@ -523,7 +555,7 @@ export default {
     xf() {
       const dataArr = [
         {
-          value: 53,
+          value: this.xfdata,
           name: "削锋",
         },
       ];
@@ -648,7 +680,7 @@ export default {
     tg() {
       const dataArr = [
         {
-          value: 42,
+          value: this.tgdata,
           name: "填谷",
         },
       ];
@@ -772,8 +804,8 @@ export default {
     },
     kdfhzy() {
       let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
-      let yaxisData = [8.8, 6.0, 6.0, 5.0];
-      let yaxisData2 = [9.3, 7.0, 7.0, 6.0];
+      let yaxisData = this.xflist;
+      let yaxisData2 = this.tglist;
 
       const offsetX = 20;
       const offsetY = 10;
@@ -845,25 +877,22 @@ export default {
 
       const option = {
         legend: {
-          itemWidth:40,
-          itemHeight:20,
-          padding:[0,10,0,10,],
+          itemWidth: 40,
+          itemHeight: 20,
+          padding: [0, 10, 0, 10],
           data: [
             {
               name: "削锋",
-              
-              // icon: require("../../../assets/nyjc/昨日.png"),
               textStyle: {
                 color: "white",
-                fontSize:24,
+                fontSize: 24,
               },
             },
             {
               name: "填谷",
-              // icon: require("../../../assets/nyjc/今日.png"),
               textStyle: {
                 color: "white",
-                fontSize:24,
+                fontSize: 24,
               },
             },
           ],
@@ -939,21 +968,7 @@ export default {
             type: "custom",
             name: "削锋",
             markPoint: {
-              data: [
-                // {
-                //   type: "max",
-                //   name: "Max",
-                //   symbolOffset: [25, 0],
-                //   itemStyle: {
-                //     color: "transparent", // 标注点颜色
-                //   },
-                //   // label 用于设置标注点上的文本标签样式
-                //   label: {
-                //     color: "#24BDF2", // 文本颜色
-                //     fontSize: 25,
-                //   },
-                // },
-              ],
+              data: [],
             },
             renderItem: (params, api) => {
               const location = api.coord([api.value(0), api.value(1)]);
@@ -1039,21 +1054,7 @@ export default {
             type: "custom",
             name: "填谷",
             markPoint: {
-              data: [
-                // {
-                //   type: "max",
-                //   name: "Max",
-                //   symbolOffset: [-20, 0],
-                //   itemStyle: {
-                //     color: "transparent", // 标注点颜色
-                //   },
-                //   // label 用于设置标注点上的文本标签样式
-                //   label: {
-                //     color: "#0BE73B", // 文本颜色
-                //     fontSize: 25,
-                //   },
-                // },
-              ],
+              data: [],
             },
             renderItem: (params, api) => {
               const location = api.coord([api.value(0), api.value(1)]);
@@ -1141,6 +1142,36 @@ export default {
       var myChart2 = echarts.init(chartDom);
       option && myChart2.setOption(option);
     },
+    async getkdfhzy() {
+      let res = await GetKdfhzy();
+      console.log(res);
+    },
+    async getkdfhcl() {
+      let res = await GetKdfhcl();
+      console.log(res);
+      this.plan = res.data;
+    },
+    async getkdfhfx() {
+      let res = await GetKdfhfx();
+      console.log(res);
+      this.kdfhfxlist = res.data[0];
+    },
+    async getgang() {
+      let res = await GetGang();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Rigidity /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.ganglist=res.data[0];
+    },
+    async getrou() {
+      let res = await GetRou();
+      console.log(res);
+      this.ganglist = res.data[0];
+      let percent = (res.data[0].Flexible /  res.data[0].GrossValue).toFixed(2);
+      this.option.series[0].data[0].value =percent;
+      this.roulist=res.data[0];
+    },
   },
   created() {
     // if (window.vuplex) {
@@ -1164,6 +1195,7 @@ export default {
     this.xf();
     this.tg();
     this.kdfhzy();
+    // this.getkdfhzy();
   },
 };
 </script>
@@ -1175,7 +1207,8 @@ export default {
   box-sizing: border-box;
   display: flex;
   position: relative;
-  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
   background-color: transparent;
   justify-content: space-between;
 
@@ -1205,7 +1238,7 @@ export default {
     font-size: 28px;
     font-weight: 700;
   }
-  .danwei{
+  .danwei {
     margin-left: 10px;
   }
   //表体颜色
@@ -1397,7 +1430,7 @@ export default {
           h3 {
             width: 97px;
             height: 53px;
-            margin-left: 240px;
+            margin-left: 208px;
             margin-top: 20px;
             font-size: 59px;
             font-family: Impact;
@@ -1441,12 +1474,13 @@ export default {
           opacity: 1;
 
           h3 {
-            width: 353px;
+            // width: 353px;
             height: 53px;
-            margin-left: 240px;
+            margin-left: 160px;
             margin-top: 20px;
-            font-size: 59px;
+            font-size: 48px;
             font-family: Impact;
+            text-align: center;
             color: #03ffd8;
             // line-height: 322px;
           }
@@ -1466,7 +1500,7 @@ export default {
             width: 50px;
             height: 27px;
             font-size: 33px;
-            margin-left: 18px;
+            margin-left: 12px;
             font-family: Microsoft YaHei;
             font-weight: 400;
             color: #ffffff;
@@ -1538,10 +1572,11 @@ export default {
         h3 {
           width: 353px;
           height: 53px;
-          margin-left: 240px;
+          margin-left: 160px;
           margin-top: 20px;
-          font-size: 59px;
+          font-size: 48px;
           font-family: Impact;
+          text-align: center;
           color: #03ffd8;
           // line-height: 322px;
         }
@@ -1561,7 +1596,7 @@ export default {
           width: 50px;
           height: 27px;
           font-size: 33px;
-          margin-left: 18px;
+          margin-left: 12px;
           font-family: Microsoft YaHei;
           font-weight: 400;
           color: #ffffff;
diff --git a/src/views/Zhou/ZNYWJK.vue b/src/views/Zhou/ZNYWJK.vue
index 1b906a9..14eb9d2 100644
--- a/src/views/Zhou/ZNYWJK.vue
+++ b/src/views/Zhou/ZNYWJK.vue
@@ -1129,14 +1129,14 @@ export default {
         align-items: center;
         overflow-y: auto;
         // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
-        ::-webkit-scrollbar {
-          width: 5px;
+        &::-webkit-scrollbar {
+          width: 14px;
           height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
           border-radius: 10px;
           background: transparent;
         }
         // 滑块
-        ::-webkit-scrollbar-thumb {
+        &::-webkit-scrollbar-thumb {
           width: 14px;
           height: 241px;
           border-radius: 10px;
@@ -1144,26 +1144,24 @@ export default {
           background-size: cover;
         }
         // 轨道
-        ::-webkit-scrollbar-track {
+        &::-webkit-scrollbar-track {
+          width: 14px;
           border-radius: 10px;
-          background: url(../../assets/ZNYWJK/滑动条.png);
           background-size: cover;
-          background-color: #f00;
         }
         /* 选中滚动条按钮 */
-        ::-webkit-scrollbar-button{
+        &::-webkit-scrollbar-button{
+          width: 14px;
           background-color: #f00;
           display: block;
         }
-
         /* 选中向上箭头 */
-        ::-webkit-scrollbar-button:start{
+        &::-webkit-scrollbar-button:start{
           display: none !important;
           height: 0px;
         }
-
         /* 选中向下箭头 */
-        ::-webkit-scrollbar-button:end{
+        &::-webkit-scrollbar-button:end{
           display: none !important;
           height: 0px;
         }
@@ -1222,7 +1220,6 @@ export default {
         width: 1155px;
         height: 500px;
         margin-top: 50px;
-
         .data {
           position: absolute;
           font-size: 28px;
@@ -1233,7 +1230,6 @@ export default {
           right: 0;
           top: 120px;
           z-index: 1;
-
           span {
             width: 240px;
             height: 38px;
@@ -1256,12 +1252,48 @@ export default {
 
         .con {
           margin-top: 100px;
-          width: 1120px;
+          width: 1130px;
           height: 145px;
+          margin-right: 10px;
           overflow: auto;
-          // background: #6C1C00;
-          // opacity: 1;
-          // border: 1px solid #FF4200;
+          &::-webkit-scrollbar {
+            padding-left: 10px;
+          width: 14px;
+          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
+          border-radius: 10px;
+          margin-right: 10px;
+          background: transparent;
+        }
+        // 滑块
+        &::-webkit-scrollbar-thumb {
+          width: 14px;
+          height: 72px;
+          border-radius: 10px;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+        }
+        // 轨道
+        &::-webkit-scrollbar-track {
+          width: 14px;
+          border-radius: 10px;
+          background-size: cover;
+        }
+        /* 选中滚动条按钮 */
+        &::-webkit-scrollbar-button{
+          width: 14px;
+          background-color: #f00;
+          display: block;
+        }
+        /* 选中向上箭头 */
+        &::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+        /* 选中向下箭头 */
+        &::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
+        }
           .con1,
           .con2 {
             width: 100%;